<template>
  <div class="page">
    <div class="page-top"> 
      <span class="left-part">绿色通道申办</span>
      <span class="right-part">
        <router-link to="/self">返回</router-link>
      </span>
    </div>
    <div class="page-body">
      <el-form :inline="true" :model="apply" class="channel" ref="applyRef" :rules="applyRules">
        <p>学生信息</p>
        <el-form-item label="学号" prop="sno" label-width="50px">
          <el-input clearable v-model="apply.sno"/>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input clearable v-model="apply.name"/>
        </el-form-item>
        <el-form-item label="性别" prop="gender" >
          <el-select clearable v-model="apply.gender" placeholder="请选择性别" style="width: 100%;">
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
          </el-select>
        </el-form-item>
        <el-form-item label="年级" prop="grade" label-width="65px">
          <el-input clearable v-model="apply.grade"/>
        </el-form-item>
        <el-form-item label="学院" prop="college"  label-width="50px">
          <el-input clearable v-model="apply.college"/>
        </el-form-item>
        <el-form-item label="专业" prop="proffesion">
          <el-input clearable v-model="apply.proffesion"/>
        </el-form-item>
        <el-form-item label="班级" prop="class">
          <el-input clearable v-model="apply.class"/>
        </el-form-item>
        <el-form-item label="手机号" prop="phone" label-width="65px">
          <el-input clearable v-model="apply.phone"/>
        </el-form-item>
        <el-divider />
        <p>申请信息</p>
        <el-form-item label="评定学年" prop="year" label-width="90px">
          <el-select clearable v-model="apply.year" placeholder="请选择学年">
            <el-option label="2021-2022学年" value="2021"/>
            <el-option label="2022-2023学年" value="2022"/>
          </el-select>
        </el-form-item>
        <el-form-item label="助学贷款类型" prop="type">
          <el-select v-model="apply.type" placeholder="请选择类型">
            <el-option label="国家助学贷款" value="国家助学贷款"/>
            <el-option label="生源地助学贷款" value="生源地助学贷款"/>
            <el-option label="商业助学贷款" value="商业助学贷款"/>
            <el-option label="大学生无息助学贷款" value="大学生无息助学贷款"/>
          </el-select>
        </el-form-item>
        <el-form-item label="申请助学贷款金额" prop="amount">
          <el-input clearable v-model="apply.amount" placeholder="单位：元"/>
        </el-form-item>
        <el-form-item label="本学年应缴学费" prop="tuition">
          <el-input clearable v-model="apply.tuition" placeholder="单位：元"/>
        </el-form-item>
        <el-form-item label="本学年应缴住宿费" prop="accommodation">
          <el-input clearable v-model="apply.accommodation" placeholder="单位：元"/>
        </el-form-item>
        <el-form-item label="申请陈述" prop="state" style="flex-basis: 100%;"  label-width="80px">
          <el-input clearable v-model="apply.state" type="textarea" maxlength="1000" :rows="5" placeholder="(最多1000字)"/>
        </el-form-item>
        <el-form-item label="备注" prop="note" style="flex-basis: 100%;"  label-width="80px">
          <el-input clearable v-model="apply.note" type="textarea" maxlength="1000" :rows="5" placeholder="(最多1000字)"/>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="submitForm" style="width: 20%;margin-bottom: 40px;">提交申请</el-button>
    </div>
    <!-- 回到顶部 -->
    <el-backtop />
  </div>
</template>

<script>
import {GreenInsert} from '@/api/user';

export default{
  data() {
    // 验证手机号的规则
    var checkMobile = (rule, value, cb) => {
        // 验证手机号的正则表达式
        const regMobile = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
        if (regMobile.test(value)) {
          return cb()
        } 
        cb(new Error('请输入合法的手机号'))
      }
    return {
      apply: {
        sno:'',
        name: '',
        gender: '',
        grade : '',
        college: '',
        proffesion: '',
        class: '',
        phone:'',
        year: '',
        type: '',
        amount: '',
        tuition: '',
        accommodation: '',
        state: '',
        note: ''
      },
      text:{
        id:'001'
      },
      applyRules: {
        sno:[{ 
          required: true, 
          message: '请输入学号', 
          trigger: 'blur' 
        }],
        phone:[{
          required: true, 
          message: '请输入手机号', 
          trigger: 'blur'
        },
        {
          validator: checkMobile ,
          trigger: 'blur'
        }],
        type:[{
          required: true, 
          message: '请选择类型', 
          trigger: 'blur' 
        }],
        college:[{
          pattern:/^[\u4e00-\u9fa5]+$/,
          message: '请输入中文',
          trigger: 'blur' 
        }],
        proffesion:[{
          pattern:/^[\u4e00-\u9fa5]+$/,
          message: '请输入中文',
          trigger: 'blur' 
        }],
        amount:[{
          pattern: /^[0-9]+(\.[0-9]{1,2})?$/, // 只能输入数字和小数点，小数点后最多两位
          message: '请输入正确的金额格式',
          trigger: 'blur'
        }],
        tuition:[{
          pattern: /^[0-9]+(\.[0-9]{1,2})?$/, // 只能输入数字和小数点，小数点后最多两位
          message: '请输入正确的金额格式',
          trigger: 'blur'
        }],
        accommodation:[{
          pattern: /^[0-9]+(\.[0-9]{1,2})?$/, // 只能输入数字和小数点，小数点后最多两位
          message: '请输入正确的金额格式',
          trigger: 'blur'
        }],
        state:[{
          required: true, 
          message: '请输入申请陈述', 
          trigger: 'blur' 
        }]
      }
    }
  },
  methods: {
    submitForm() {
      this.$nextTick(() => {
        this.$refs.applyRef.validate((valid) => {
          if (valid) {
            // 发送post请求，向后端传递表单数据
            GreenInsert( 
              {id:this.apply.sno,
              name:this.apply.name,
              sex:this.apply.gender,
              gclass:this.apply.class,
              grade:this.apply.grade,
              college:this.apply.college,
              proffesion:this.apply.proffesion,
              phone:this.apply.phone,
              description:this.apply.state,
              type:this.apply.type,
              year:this.apply.year,
              amount:this.apply.amount,
              amountforroom:this.apply.tuition,
              actualamount:this.apply.accommodation,
              information:this.apply.note
              },
              {
              headers: {
                'token':window.sessionStorage.getItem("token")
              }
              }).then(() => {
              // 提交成功时的消息提示
              this.$message({
                type: 'success',
                message: '提交成功，请在后台查看审核状态',
              });
            }).catch((error) => {
              // 提交失败时的消息提示
              console.log(error);
              this.$message({
                type: 'error',
                message: '提交失败，请稍后重试',
              });
            });
          } else {
            // 表单数据不合法
            this.$message.error('表单数据不合法，请检查输入');
            return false;
          }
        });
      });
    }
  }
}
</script>

<style scoped>
.page{
  background: rgba(242, 241, 241, 1);
  min-height: 100vh;
}
.page-top{
  height: 50px;
  background: rgba(26, 188, 156, 1);
  font-size: 23px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #FFFFFF;
}
.left-part{
    position: relative;
    left: 30px;
  }
  .right-part{
    position: relative;
    right: 60px;
  }
span{
  margin-left: 20px;
}
p{
  width: 100%;
  text-align: left; 
  margin: 10px 5px;
  border: 4px solid rgba(26, 188, 156, 1);
  border-top:none;border-bottom:none;border-right: none;
}
.page-body{
  margin: 20px;
  margin-bottom: 0;
  background: #FFFFFF;
}
.channel{
  margin: 10px;
}
.el-form{
  display: flex;
  flex-wrap: wrap;
}
.el-form-item {
  margin-right: 20px;
  flex: 0 0 calc(25% - 20px); /* 设置每个 el-form-item 的宽度为 25%（四列布局） */
}
/* 点击时去掉下划线 */
.router-link-active {     
    text-decoration: none;
  }
/* 去掉原有链接文字下划线 */
  a {
    text-decoration: none; 
    font-size: 20px;
    color: #ffffff;
  }
</style>